<template>
	<view>
		<view class="category-search page-index">
			<view class="weui-flex ionp">
				<view class="weui-flex__item category-search-form">
					<view class="flex-head-search">
						<view class="weui-search-bar__form" style="border-radius: 30rpx;">
							<view class="weui-search-bar__box category-search-box">
								<view class="flex-icon-search">
									<text class="icon icon-search"></text>
								</view>
								<view class="weui-search-bar__input flex-input">
									<input type="text" placeholder="搜索我感兴趣的课程" v-model="keyword" style="font-size: 24rpx;">
								</view>
								<view @click.stop="searchs"
									style="background-color: #F76E00; color: #fff; font-size: 22rpx; text-align: center; width: 90rpx; height: 45rpx; line-height: 45rpx; margin-right: 10rpx; border-radius: 50rpx;">
									<text>搜索</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="index-neir">
			<u-dropdown-list class="display-flex biaoq" :height="700" @change="change" activeColor="#F7C500" :dropdownList="dropdownList"></u-dropdown-list>
			<view>
				<view class="cot display-flex">
					<view class="cot-nr" v-for="(item, indexi) in listData" :key="indexi" @click="llpo(item.id)">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="cot-nr-1">
							<view class="bt">{{ item.title }}</view>
							<view class="display-flex dib">
								<view class="dib1">芒播商学院</view>
								<view class="dib2" v-if="item.price == 0">免费</view>
								<view class="dib2" v-else-if="item.course_list_count == 1">试听</view>
								<view class="dib3 dib2" v-else>￥{{ item.price }}</view>
							</view>
						</view>
					</view>
					
					<!-- 空白页 -->
					<empty v-if="listData.length == 0"></empty>
				</view>
			</view>
			<uni-load-more :status="loadingType" v-if="listData.length > 0"></uni-load-more>
			<view v-if="listData.length > 0" style="height: 40rpx;"></view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
         
		</view>
		<tabbar ></tabbar>
	</view>
</template>

<script>
    import { apiGetSchoolCategoryList, apiGetSchoolCourseList } from "@/api/school.js"
	// import tabbar from '@/pages/shop/tabbar';
	import empty from "@/components/empty";
	export default {
		components: {
			// tabbar,
			empty
		},
		onLoad() {
			//获取最底层分类
			this.getLastCate();
			
			this.getList();
		},
		data() {
			return {
				config: '',
				ito: 0,
				lis: 0,
				value1: 1,
				scrollTop: 0,
				dropdownList: [],
				
				last_id: 0,
				reload: true,
				loadingType: 'more', //加载更多状态
				wheres: {
					order: '',
					sort: '',
					limit: 10,
					p: 1
				},
				listData: [],
				keyword: '',
				is_last: false,
                paginationData: {
                    page_size: 10,
                    page_no: 1,
                },
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
        onPullDownRefresh() {
            console.log("aaa")
            uni.stopPullDownRefresh()
            this.refresh()
        },
        onReachBottom() {
            console.log("wwww")
        	this.getList();
        },
		methods: {
			llpo(id){
				uni.navigateTo({
					url:'/pagesSchool/pages/detail?id=' + id
				})
			},
			ppo(i) {
				this.ito = i
				if (i == 1) {

				}

			},
			llp(index) {
				if(index !== 0 ){
					uni.showToast({
						title: '暂无数据....',
						duration: 2000,
						icon: 'none'
					});
				}
				this.lis = index
			},
			llmk(indexi) {
				console.log(indexi);
			},
			change(e) {
				
				if(['all', 'give', 'forward', 'views', 'price'].includes(e.value)) {
					switch(e.value) {
						case 'all':
							this.wheres.sort = 'createtime'
							this.wheres.order = 'desc'
							break;
						case 'give':
							this.wheres.sort = 'give'
							this.wheres.order = 'desc'
							break;
						case 'forward':
							this.wheres.sort = 'forward'
							this.wheres.order = 'desc'
							break;
						case 'views':
							this.wheres.sort = 'views'
							this.wheres.order = 'desc'
							break;
						case 'price':
							this.wheres.sort = 'price'
							this.wheres.order = 'asc'
							break;
					}
				} else {
					this.wheres.cid = e.id;
				}
				this.refresh()
			},
			refresh() {
                this.loadingType = 'more';
                this.listData = [];
                this.is_last = false;
                this.wheres.p = 1;
                this.paginationData.page_no = 1
                this.getList();
            },
			getList() {
                const vm = this
                let data = {
                    ...this.wheres,
                    ...this.paginationData
                };
                console.log("getList data1", data, vm.loadingType)
                if (vm.loadingType === 'loading' || vm.loadingType === 'noMore') {
                    return
                }
                 console.log("getList data2", data)
                vm.loadingType = 'loading';
				apiGetSchoolCourseList(data).then(res => {
                    console.log("console.res", res)
                    if (res.count > 0) {
                    	let list = res.lists;
                    	vm.listData = vm.listData.concat(list);
                        vm.paginationData.page_no =  vm.paginationData.page_no + 1
                    	if (res.count > vm.listData.length) {
                    		vm.loadingType = 'more';
                    	} else {
                            vm.loadingType = 'noMore';
                        }
                    } else {
                    	vm.listData = [];
                    	vm.contentText.contentdown = '暂无数据'
                    	vm.loadingType = 'noMore'
                    }
                    uni.stopPullDownRefresh()
					// if(this.wheres.p == 1  && res.count <= this.wheres.limit) {
					// 	this.loadingType = 'nomore';
					// 	this.is_last = true;
					// } else {
					// 	if(list.length > 0) {
					// 		this.loadingType = 'more';
					// 		this.wheres.p++;
					// 	} else {
					// 		this.loadingType = 'nomore';
					// 		this.is_last = true;
					// 	}
					// }
				}).catch((err) => {
                    console.log("e123", err)
                    vm.loadingType = 'noMore'
                    uni.stopPullDownRefresh()
                });
			},
            /**
             * 获取课程分类的数据
             * 这里的需求是，如果是综合分类，就显示综合分类的数据，如果是综合，就展示综合的数据。
             * 之前的逻辑是通过。show 字段，控制显示。
             * @example [
                {
                    show: false,
                    name: 1,
                    options: []
                },
                {
                    show: true,
                    name: 1,
                    options: []
                }
             ]
             */
			getLastCate() {
				apiGetSchoolCategoryList().then(res => {
					this.dropdownList = [
						{
							show: false,
							name: 1,
							options: [
								{ id: 0, text: '综合', value: 'all', select: false },
								{ id: 1, text: '点赞最多', value: 'give', select: false },
								{ id: 2, text: '转发最高', value: 'forward', select: false },
								{ id: 3, text: '最高播放', value: 'views', select: false },
								{ id: 4, text: '价格最优惠', value: 'price', select: false }
							]
						}
					]
					
					let options = [];
                    options = res.lists.map((item, index) => {
                        return {
                            ...item,
                            text: item.name,
                            value: item.id,
                            select: false
                        }
                    })
                    options.unshift(
                        { id: 0, text: '课程分类', value: '', select: false }
                    )
					this.dropdownList.unshift({
						show: false,
						name: 2,
						options: options
					})
				})
			},
			searchs() {
				this.wheres.keyword = this.keyword;
                this.refresh()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF !important;
	}
	.display-flex {
		display: flex;
		justify-content: space-between;
	}

	.index-neir {
		width: 750rpx;
		// height: 1389rpx;
		border-radius: 20rpx;

		.cot {
			flex-wrap: wrap;
			width: 700rpx;
			margin: 0 auto;
			.cot-nr {
				width: 340rpx;
				height: 265rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				margin-bottom: 23rpx;
				box-shadow: 1rpx 1rpx 0rpx 0rpx #ececec, 0rpx 0rpx 4rpx 4rpx rgba(217, 218, 206, 0.4);

				image {
					width: 100%;
					height: 179rpx;
					border-radius: 20rpx 20rpx 0 0;
				}

				.cot-nr-1 {
					padding: 17rpx 15rpx 0 16rpx;

					.bt {
						width: 310rpx;
						font-weight: 400;
						font-size: 23rpx;
						color: #666666;
						white-space: nowrap; 
						overflow: hidden; 
						text-overflow: ellipsis;


					}

					.dib {
						justify-content: space-between;

						.dib1 {
							font-weight: 400;
							font-size: 14rpx;
							color: #BEBABA;
							line-height: 30rpx;
						}

						.dib2 {
							// width: 60rpx;
							padding: 2rpx 8rpx;
							height: 30rpx;
							line-height: 30rpx;
							background: #666666;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							text-align: center;
							border-radius: 5rpx;
						}

						.dib3 {
							background: #F76E00 !important;
						}
					}
				}
			}
		}

		.daoh-nr {
			flex-wrap: wrap;
			width: 720rpx;
			margin: 0 auto;
			.daoh-bt {
				width: 220rpx;
				height: 60rpx;
				background: #F5F5F6;
				border-radius: 27rpx;
				font-weight: 400;
				font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
				margin-bottom: 10rpx;
				border: 1rpx solid #F5F5F6;
			}

			.aaic {
				background: #FDDDC3;
				border: 1rpx solid #E07C04;
				color: #F76E00;
			}
		}

		.biaoq {
			margin-left: -42rpx;

			.echas {
				color: #F76E00;
			}
		}
	}

	.page-index {
		width: 100%;
		background-color: #FF8200;
		height: 130rpx;
		position: relative;
		.ionp {
			width: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
	
	.flex-input {
		display: flex;
		align-items: center;
	}
</style>